<template>
  <div class="app-container">
    <el-form ref="contract" :model="contract" :rules="rules" label-width="100px" class="demo-ruleForm" style="max-width: 500px;">
      <h4>{{this.$route.query.adname}} 新增合同</h4>
      <el-divider></el-divider>
      <el-form-item label="合同编号" prop="contract_no">
        <el-input v-model="contract.contract_no" />
      </el-form-item>
      <el-form-item label="合同别名" prop="title">
        <el-input v-model="contract.title" />
      </el-form-item>
      <el-form-item label="产品线" prop="product_line">
        <productLine v-on:func="selectProductLine"></productLine>
      </el-form-item>
      <el-form-item label="合同时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="contract.start" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="contract.end" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="金额" prop="money">
        <el-input v-model="contract.money" @change="showMoney" select	/>
      </el-form-item>
      <el-form-item label="返点" prop="rebate" >
        <el-input v-model="contract.rebate" @change="showMoney">
        <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="代理返点" prop="dl_rebate" >
        <el-input v-model="contract.dl_rebate" @change="showMoney">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="显示金额" prop="show_money">
        <el-input v-model="contract.show_money" :disabled="true"/>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input  type="textarea" v-model="contract.note" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('contract')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Resource from '@/api/resource';
import productLine from '@/components/ProductLine/Index.vue';

const apiResource = new Resource('contract');

export default {
  name: 'Add',
  data() {
    return {
        contract: {
            advertiser:this.$route.query.id,
            contract_no: '',
            title:'',
            product_line: '',
            start:'',
            end:'',
            money:'',
            rebate:0,
            dl_rebate:0,
            show_money:0,
            type:2,
            note:'',
      },
      rules: {
          contract_no: [
          { required: true, message: '请输入合同编号', trigger: 'blur' },
          ],
          product_line: [
          { required: true, message: '请选择产品线', trigger: 'blur'},
          ],
          title: [
          { required: true, message: '请输入媒介合同别名', trigger: 'blur' },
          ],
          money: [
              { required: true, message: '请输入金额', trigger: 'blur'},
          ],
          rebate:[
              { required: true, message: '请输入返点', trigger: 'blur' },
          ]
      },
    };
  },
  created(){
      this.setContractOn()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.createContract();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
      createContract(){
          apiResource.store(this.contract)
        .then(response => {
          this.$message({
            message: '恭喜,添加成功.',
            type: 'success',
            duration: 5 * 1000,
          });
            this.$router.push({ name: 'mcontractList' });
        }).catch(error => {
          console.log(error);
        });


    },
      showMoney(){
          let money = parseInt(this.contract.money);
          let fandian = parseInt(this.contract.rebate);
          let dl_fandian = parseInt(this.contract.dl_rebate);
          this.contract.show_money=(money*(1+fandian/100)/(1-dl_fandian/100)).toFixed(2);
      },
      selectProductLine(pr){
        this.contract.product_line=pr;
      },
      setContractOn(){
          const now = new Date()
          let month = now.getMonth() + 1
          let day = now.getDate()
          let hour = now.getHours()
          let minutes = now.getMinutes()
          let seconds = now.getSeconds()
          let no= now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 89 + 100)).toString()
          this.contract.contract_no=no;
      }
  },
  components:{
      "productLine":productLine
  }
};
</script>

<style scoped>

</style>
